@use "../../default" as theme;
@use "sass:math";
.pf-Toggle{
	font-size: theme.$Toggle-height;
	color: theme.$Toggle-primary-color;
	position:relative;
	background: theme.$Toggle-bg-color;
	width: theme.$Toggle-width;
	height:1em;
	border-radius: math.div(1em,2);
	display:inline-block;
	overflow:hidden;
	cursor:pointer;
	user-select:none;
	vertical-align: theme.$vertical-align;
	transition: theme.$Toggle-transition;
	transition-property:background;
	&:focus{
		outline:0;
	}
	&.pf--disabled{
		@include theme.disabled-mask(0.5em);
	}
	&.pf--active{
		background:currentColor;
		.pf-Toggle_circle{
			transform:translateX(100%);
		}
	}
}
.pf-Toggle_circle{
	width:calc(100% - 1em);
	position:absolute;
	top: theme.$Toggle-gap;
	left: theme.$Toggle-gap;
	transition: theme.$Toggle-transition;
	transition-property:transform;
	>div{
		width: theme.$Toggle-circle-size;
		height: theme.$Toggle-circle-size;
		border-radius:50%;
		background:#fff;
	}
}
.pf-Toggle_open,.pf-Toggle_close{
	position:absolute;
	font-size: theme.$Toggle-content-size;
	color:#fff;
	height:100%;
	display:flex;
	align-items:center;
}
.pf-Toggle_open{
	left:0.5em;
}
.pf-Toggle_close{
	right:0.5em;
}